<template>
  <div class="app-container">
    <div class="filter-container">
      <ul class="filter-ul">
        <li style="margin: 0 20px 0 20px">
          <img
            style="
              width: 60px;
              height: 60px;
              border: 1px solid #bfbfbf;
              border-radius: 100%;
            "
            src="../../../assets/imgs/renwu-ren.png"
          />
        </li>
        <li style="margin-right: 60px">
          <p style="height: 20px; margin-bottom: 5px">{{ nickname }}</p>
          <p
            style="
              height: 20px;
              border: 1px solid #db6c21;
              border-radius: 10px;
              background-color: #daa520;
              color: #ffffff;
              padding: 2px;
              text-align: center;
              padding: 0 5px;
            "
          >
            <span class="uid">{{ uid }}</span>
          </p>
        </li>
        <li>
          <p style="height: 20px; margin-bottom: 5px">用户状态</p>
          <p style="height: 20px; width: 60px">正常</p>
        </li>
        <li style="flex: 1; padding-left: 60%">
          <div class="index_nav" v-show="this.uid == '2375374'">
            <span class="upload-file">
              <el-button
                size="small"
                type="info"
                round
                @click="dialogAddFile = true"
                >上传数据</el-button
              >
            </span>
          </div>
        </li>
      </ul>
    </div>

    <div class="filter-tabel">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="padding-left: 20px"
      >
        <el-tab-pane label="账户信息" name="first">
          <ul>
            <li class="filter-li">
              <div class="filter-img">
                <img class="img" src="../../../assets/imgs/qizhi-.png" />
              </div>
              <div class="filter-div">
                <p class="filter-p">登录密码</p>
                <div style="height: 50px">
                  <img
                    src="../../../assets/imgs/zhuyi.png"
                    style="width: 20px; height: 20px; margin-right: 10px"
                  />
                  <span>未绑定</span>
                </div>
              </div>
            </li>
            <li class="filter-li">
              <div class="filter-img">
                <img class="img" src="../../../assets/imgs/xinxi-xian.png" />
              </div>
              <div class="filter-div">
                <p class="filter-p">是否实名</p>
                <div style="height: 50px">
                  <img
                    src="../../../assets/imgs/zhuyi.png"
                    style="width: 20px; height: 20px; margin-right: 10px"
                  />
                  <span>未绑定</span>
                </div>
              </div>
            </li>
            <li class="filter-li">
              <div class="filter-img">
                <img class="img" src="../../../assets/imgs/rili.png" />
              </div>
              <div class="filter-div">
                <p class="filter-p">手机号</p>
                <div style="height: 50px">
                  <img
                    src="../../../assets/imgs/zhengque.png"
                    style="width: 20px; height: 20px; margin-right: 10px"
                  />
                  <span>已绑定</span>
                </div>
              </div>
            </li>
            <li class="filter-li">
              <div class="filter-img">
                <img class="img" src="../../../assets/imgs/shuxie.png" />
              </div>
              <div class="filter-div">
                <p class="filter-p">微信绑定</p>
                <div style="height: 50px">
                  <img
                    src="../../../assets/imgs/zhengque.png"
                    style="width: 20px; height: 20px; margin-right: 10px"
                  />
                  <span>已绑定</span>
                </div>
              </div>
            </li>
            <li class="filter-li">
              <div class="filter-img">
                <img class="img" src="../../../assets/imgs/xiaoxi.png" />
              </div>
              <div class="filter-div">
                <p class="filter-p">绑定支付宝</p>
                <div style="height: 50px">
                  <img
                    src="../../../assets/imgs/zhuyi.png"
                    style="width: 20px; height: 20px; margin-right: 10px"
                  />
                  <span>未绑定</span>
                </div>
              </div>
            </li>
            <li class="filter-li">
              <div class="filter-img">
                <img class="img" src="../../../assets/imgs/qizhi-.png" />
              </div>
              <div class="filter-div">
                <p class="filter-p">登录过的手机号</p>
                <div style="height: 50px">
                  <span>13713306213</span>
                </div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="个人信息" name="second">个人信息</el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="addName"
      :visible.sync="dialogAddFile"
      width="600px"
      style="padding: 0"
      @close="resetAdd"
    >
      <uploader
        :options="options"
        class="uploader-example"
        @file-complete="fileComplete"
        @complete="complete"
      >
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <p>Drop files here to upload or</p>
          <uploader-btn>select files</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
      <!-- <div class="add-file-right"
        style="height: 70px; margin-left: 10px">
        <input type="file"
          ref="clearFile"
          @change="getFile($event)"
          
          class="add-file-right-input"
          style="margin-left: 80px"
          accept=".docx,.doc,.pdf,.xls,.tar,.zip,.jpg,.png" />
        <div class="add-file-right-more">
          支持扩展名：.doc .docx .pdf .xls.tar.zip.jpg.png
        </div>
      </div>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitAddFile"
          size="small">开始上传</el-button> -->
      <el-button @click="dialogAddFile = false">取 消</el-button>
      <!-- </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { upload1, upload2, getuserInfo } from "@/api/all.js";
// import uploader from "vue-uploader"
export default {
  name: "ComplexTable",
  // components:{
  //   uploader
  // },
  // directives: { waves },
  data() {
    return {
      activeName: "first",
      dialogAddFile: false,
      addName: "上传文件",
      addArr: [],
      file: [],
      options: {
        // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
        target:
          "http://128.196.150.85:1350/v1/api/unsafe/annotate/api/aiom/uploadChunk",
        testChunks: false, //上传前判断块是否已经存在
        simultaneousUploads: 5, //并发数
        chunkSize: 8 * 1024 * 1024 //块大小
      },
      uid: "", //用户编号
      nickname:""  //用户名称
    };
  },
  created() {
    /* if (window.localStorage.getItem("token")) {
      this.userInfoFun(window.localStorage.getItem("token"));
      console.log(this.uid);
    }else {

    } */
    if (window.localStorage.getItem("token")) {
          this.userInfoFun(window.localStorage.getItem("token"));
        }else if(this.token&&!getToken()){
          this.userInfoFun(window.localStorage.getItem("token"));
        }else{
          this.$message({
            type: "warning",
            message: "请登录"
          });
        let dev = /^dev.+$/.test(window.document.domain) ? 'dev.' : '';
        let offline = /^offline.+$/.test(window.document.domain) ? 'offline.' : '';
        let prefix = offline != '' ? offline : dev
        //登录是85.
        let login_ip = this.$store.state.login_ip
       
        window.location = `http://${prefix}${login_ip}/weblogin/password?referer=${location.origin}/#/logs/logon`;
        this.$message({
            type: "success",
            message: "正在跳转登录页!"
          });
        }
  },
  mounted() {},
  methods: {
    // 获取uid的方法
    userInfoFun(token) {
       getuserInfo(token)
        .then(res => {
          console.log("response", res);
           this.uid = res.object.uid;
          //  20211103增加获取用户名
           this.nickname=res.object.nickname
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    openUploadWin() {},
    resetAdd(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          // done();
          this.addArr = [];
          this.file = [];
        })
        .catch(_ => {});
    },
    complete() {
      console.log("complete", arguments);
    },
    async fileComplete() {
      console.log("file complete", arguments);
      const file = arguments[0].file;
      const res = await upload2(file.name, arguments[0].uniqueIdentifier);
      this.$message({
        type: "success",
        message: "附件上传成功!"
      });
      // let url =
      //   "http://192.168.1.84:8089/upload/merge?filename=" +
      //   file.name +
      //   "&guid=" +
      //   arguments[0].uniqueIdentifier;
      // this.$axios
      //   .get(url)
      //   .then(function(response) {
      //     console.log(response);
      //   })
      //   .catch(function(error) {
      //     console.log(error);
      //   });
    }
    // getFile(event) {
    //   this.file = event.target.files;
    //   for (var i = 0; i < this.file.length; i++) {
    //     //    上传类型判断
    //     var imgName = this.file[i].name;
    //     var idx = imgName.lastIndexOf(".");
    //     if (idx != -1) {
    //       var ext = imgName.substr(idx + 1).toUpperCase();
    //       ext = ext.toLowerCase();
    //       this.addArr.push(this.file[i]);
    //     }
    //   }
    // },
    // submitAddFile() {
    //   if (0 == this.addArr.length) {
    //     this.$message({
    //       type: "info",
    //       message: "请选择要上传的文件"
    //     });
    //     return;
    //   }

    //   var formData = new FormData();
    //   // formData.append("num", this.addType);
    //   // formData.append("linkId", this.addId);
    //   // formData.append("rfilename", this.addFileName);
    //   for (var i = 0; i < this.addArr.length; i++) {
    //     formData.append("file", this.addArr[i]);
    //   }
    //   uploadFile(formData).then(response => {
    //     if (response.code == "200") {
    //       this.$message({
    //         type: "success",
    //         message: "附件上传成功!"
    //       });
    //     }
    //   });
    // }
  }
};
</script>
<style lang="scss" scoped>
.uid {
  display: inline-block;
  height: 100%;
  font-size: 14px;
  line-height: 20px;
}
.app-container {
  // background-color: #fff;
  padding-top: 10px;
  height: 100vh;
}

.filter-container {
  margin: 5px 0 20px 0;
  height: 120px;
  border-width: 0px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(233, 233, 233, 1);
  border-radius: 10px;
  // box-shadow: 0px 0px 5px rgb(0 0 0 / 5%);
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 20px;
}
.filter-tabel {
  // height: 70%;
  border-width: 0px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(233, 233, 233, 1);
  border-radius: 10px;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
}
.filter-ul {
  height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-li {
  height: 100px;
  line-height: 100px;
  border-bottom: 1px solid rgba(240, 242, 245, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-img {
  border: 1px solid #b9b8b7;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  position: relative; //父元素设置绝对定位
  text-align: center;
}
.img {
  width: 30px;
  height: 30px;
  position: absolute; //相对定位
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; //使其垂直居中
}
.filter-div {
  flex: 1;
  padding-left: 20px;
  height: 120px;
  .filter-p {
    height: 40px;
    padding-bottom: 5px;
  }
}
</style>

